<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
  <meta name="GENERATOR" content="MSHTML 11.00.10586.494">
  <meta http-equiv="Content-Type"content="application/pdf; charset=utf-8">
  <title>北京市人民政府外事办公室领事保护教育服务平台——视频播放</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href='<c:url value="/share/bootstrap.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/video-js.css"></c:url>'>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script type="text/javascript" src='<c:url value="/js/jquery.min.js"></c:url>'></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script type="text/javascript" src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/all.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/prefixfree.min.js"></c:url>'></script>
  <script src="<c:url value='/js/serverCommonJs.js'></c:url>"></script>
<script src="<c:url value='/js/rqfCommon/rqfCommon.js'></c:url>"></script>
<style type="text/css">
html,body {
    -webkit-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 );
    -moz-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, 5 );
    box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 );
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
  <center style="margin: 0 auto;">
  <div class="video_content" style="margin: 0 auto; position: relative; overflow: hidden;">
	  <div id="home_video_audio_test">
	    <video class="video-js vjs-default-skin vjs-big-play-centered" id="example_video_1" preload="auto" controls="" poster='<c:url value="${imgUrl}"></c:url>' data-setup="{}" autoplay="autoplay" style="width:100%;height:100%;">
	        <source src="${sourceUrl}" type="video/${fileType1}"> 
	      </video> 
      </div>
  </div>
  </center>
  
  <input id="Jake_Video" type="text" style="display: none;" value="视频页面的值"></input>
  
  <script src='<c:url value="/js/video.js"></c:url>'></script>
  <script>
  var myVid = document.getElementById("example_video_1");
  //初始化配置
  videojs(myVid,{
      techOrder : ["html5","flash"],
      width: '100%',
	  height: '100%',
      children : {
        // bigPlayButton : false,
          textTrackDisplay : false,
          posterImage: false,
          errorDisplay : false,
          controlBar : {
              captionsButton : false,
              chaptersButton: false,
              subtitlesButton:false,
              liveDisplay:false,
              playbackRateMenuButton:false
          }
      },
		notSupportedMessage: '对不起,没有视频资源！',
  },function(){
      //console.log(this)
  });
	  $(document).ready(function(){
		  	$('center').css({
		  		'height': $(window).height()
		  	})
		  	$('#home_video_audio_test').css({
		  		'height': $(window).height(),
		  		'width': '100%'
		  	})
			setTimeout(function(){
				$("#example_video_1").css({
		  			"width":"100%",
		  			"height":"100%"
		  		})
			},1000)
		})
		//指定播放时间
	  	function VideoPlay(time,Operator){
	    	myVid.currentTime = time;
		    myVid.play();
	  	}
		$(function(){
		    //var video;
		    //IE存储用cookie来解决
		    //写cookies 
			function setCookie(name,value) { 
			    var Days = 30; 
			    var exp = new Date(); 
			    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
			    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
			} 
	
			//读取cookies 
			function getCookie(name) { 
			    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			 
			    if(arr=document.cookie.match(reg))
			 
			        return unescape(arr[2]); 
			    else 
			        return null; 
			} 
	
			//删除cookies 
			function delCookie(name) { 
			    var exp = new Date(); 
			    exp.setTime(exp.getTime() - 1); 
			    var cval=getCookie(name); 
			    if(cval!=null) 
			        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
			} 
		    var fileId = '${fid1}';
		    /* var fileId = '${fid1}' != ''?'${fid1}':$("#video_start").attr('value','0');
		    //判断资源是否存在
		    var video_start = $("#video_start", window.parent.document).attr('value');
		    if(video_start == 0){
		  	   //$("#home_video_audio_test", window.parent.document).css('width',1190 - 325+"px");
		    } */
		    var course_id = ${id};
		    var total_time;//总时长
		    //上次播放时间段|设定时间段
		    //myVid.currentTime = video;
		  //事件响应
		  var player = videojs('example_video_1');
		  var playerCurrentTime = 0;
		  var video_Time = "";
		  var VPT_CurrentTime;
		  if(!window.localStorage){
				video_Time = getCookie("video_Time");
			}else{
			    video_Time = localStorage.getItem("video_Time");
			}
		  // 检测播放时间
		  player.on('timeupdate', function () {
			  //把进度时间传递给父页面的变量
			  VPT_CurrentTime = parseInt(player.currentTime());
			  parent.RealTime = VPT_CurrentTime;
			  //切换时把当前视频进度进行存储
			  if(!window.localStorage){
					setCookie("video_Time", player.currentTime());
				}else{
					localStorage.setItem("video_Time", player.currentTime());
				}
		      if (player.duration() != 0 && player.currentTime() === player.duration()) {
		    	  video_outTime_End(course_id,fileId);
		      }
		  });
		  // 开始或恢复播放
		  player.on('play', function() {  
		    $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").hide();
		  });
		  // 暂停播放
		  player.on('pause', function() {  
		    $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").show();
		  });
		  
		  //获取总时长
		  $("video")[0].addEventListener("loadedmetadata", function(){
		    var tol = this.duration;//获取总时长
			total_time = tol;//总时长
		    DirTree_GetMsg(course_id,fileId,total_time,video_Time);
		  });
		  
		  init_timerId = setInterval(function(){
			  var init_time = player.currentTime();//初始化时间
		      video_outTime(course_id,fileId,init_time);
		  }, 120000);
		  
		  //寻找资源时触发,把时间给父页面传值时间让PPT跳到指定页码
		  player.on('seeking', function(){
			  //parent.getMsg(VPT_CurrentTime);
		  })
		  //寻找资源完毕时触发,把时间给父页面传值时间让PPT跳到指定页码
		  player.on('seeked', function() { 
			  parent.getMsg(VPT_CurrentTime);
		  });
		  
		  var video_str = window.location.href;  //接收地址
		  	video_str = video_str.substring(video_str.lastIndexOf("/"));//进行地址ID的获取,默认ID前带/(/1)
		  	//设定变量用来存储值
		  	var set_courseId = "",
		  		set_listId = "",
		  		set_fileId = "",
		  		set_fileType = "",
		  		set_currentTime = "";
			//目录树章节数据获取
		  	 function DirTree_GetMsg(courseId,fileId,total_time,video_Time){
		  		var content_Notes = "<c:url value='/study/course/studyProcess'></c:url>";
			   	 $.ajax({
			   		url: content_Notes,
			   		type:"POST",
			   		dataType:"JSON",
			   		data:{
			   			'courseId': courseId,
			   			'fileId': fileId, 
			   			'totalTime': total_time
			   		},
			   		success:function(data){
		   				var video_Value = $("#video_Value", window.parent.document).attr('value');
			   			if(data){
				   			if(data.currentTime != null && data.endTime == null){
				   				//指定播放时间
				   				if(video_Value > 0 && video_Time > 0){
			     				  myVid.currentTime = video_Time;
			     				  myVid.play();
				  				  $("#video_Value", window.parent.document).attr('value','0');
				  			    }else{
					   				myVid.currentTime = data.currentTime;
					   				myVid.play();
				  			    }
				   			}else{
				   				//指定播放时间
				   				if(data.endTime !== null ){
				   					//alert(1);
				   				}
				   				myVid.currentTime = data.currentTime == null?video_Time:data.currentTime;//endtime_tree有值的时候从0开始播放
				   				myVid.play();
				   			}
			   			}
			   		},
					complete : function(XMLHttpRequest, textStatus) {
		 				//console.log(XMLHttpRequest,textStatus);
		 			},
			   		error:function(error){
			   			//console.log(error);
			   		}
			   	 });
		  	 }
		  	
		  	//获取视频资源和进程替换(开始)
		  	function video_outTime(courseId_out,fileId,currentTime_out){
		  		 var content_outTime = "<c:url value='/study/course/updatProcess'></c:url>";
			   	 $.ajax({
			   		url: content_outTime,
			   		type:"POST",
			   		dataType:"JSON",
			   		data:{
			   			courseId: courseId_out,
			   			fileId: fileId,
			   			currentTime: currentTime_out,//当前进程时间，以秒为单位
			   		},
			   		success:function(data){
			   			//console.log(data);
			   		},
					complete : function(XMLHttpRequest, textStatus) {
						//console.log(XMLHttpRequest,textStatus);
					},
			   		error:function(error){
			   			//console.log(error);
			   		}
			   	 });
		  	}
		  	
		  	//获取视频资源和进程替换(结束)
		    function video_outTime_End(courseId_out,fileId){
		  		 var content_outTime = "<c:url value='/study/course/updatEndProcess'></c:url>";
			   	 $.ajax({
			   		url: content_outTime,
			   		type:"POST",
			   		dataType:"JSON",
			   		data:{
			   			courseId: courseId_out,
			   			fileId: fileId,
			   		},
			   		success:function(data){
			   			//console.log(data);
			   		},
					complete : function(XMLHttpRequest, textStatus) {
						//console.log(XMLHttpRequest,textStatus);
					},
			   		error:function(error){
			   			//console.log(error);
			   		}
			   	 });
		  	}
		})
  </script>
</body>
</html>
